<!DOCTYPE html>
<#assign static=request.getContextPath()+"/static" />
<#assign base=request.getContextPath() />
<html>
  <head>
    <meta charset="UTF-8">
    <title>shiroDemo</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="${static}/images/favicon.ico"/>
    <link rel="bookmark" href="${static}/images/favicon.ico"/>
    <!-- Bootstrap 3.3.4 -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome Icons -->
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- DataTables -->
    <link rel="stylesheet" href="//cdn.bootcss.com/datatables/1.10.12/css/jquery.dataTables.min.css">
    <!-- Theme style -->
    <link href="${static}/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
    <link href="${static}/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />


    <!-- daterange picker -->
    <link href="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.24/daterangepicker.min.css" rel="stylesheet">

    <link rel="stylesheet" href="${static}/build/bsgrid/merged/bsgrid.all.min.css"/>
    <link rel="stylesheet" href="${static}/build/bsgrid/css/skins/grid_bootstrap.min.css"/>
    
            <!-- SELECT2 -->
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="//cdn.bootcss.com/Kalendae/0.6.1/kalendae.min.css" rel="stylesheet">


    <link href="//cdn.bootcss.com/bootstrap-select/1.9.4/css/bootstrap-select.min.css" rel="stylesheet">

    <link href="//cdn.bootcss.com/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css" rel="stylesheet">


      <style>
          .pageLoading {
               position: fixed;
               left: 0px;
               top: 0px;
               width: 100%;
               height: 100%;
               z-index: 9999;
               background: url(${static}/images/square.gif) center no-repeat #fff;
           }
          .ajaxLoading {
              position: fixed;
              left: 0px;
              top: 0px;
              width: 100%;
              height: 100%;
              z-index: 9999;
              background: url(${static}/images/loading_6.gif) center no-repeat #fff;
              display: none;
          }
      </style>

  </head>
  <body class="skin-blue sidebar-mini">

  <div class="pageLoading"></div>
  <div class="ajaxLoading"></div>

      <header class="main-header">

        <!-- Logo -->
        <a href="${base}/user/index" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><b>S</b></span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b>S</b>hiro</span>
        </a>

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- Messages: style can be found in dropdown.less-->
               <li class="dropdown messages-menu">
               </li>
               <li class="dropdown messages-menu">
               </li>
                <li class="dropdown notifications-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                        <i class="fa fa-bell-o"></i>
                        <span class="label label-danger">1</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header"></li>
                        <li>
                            <!-- inner menu: contains the actual data -->
                            <ul class="menu">
                                <li>
                                    <a href="#">
                                        <i class="fa fa-warning text-yellow"></i>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="footer"><a href="#">标记已读</a></li>
                    </ul>
                </li>
              
              <!-- User Account: style can be found in dropdown.less -->
              <li class="dropdown user user-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="${static}/images/Avatar2.jpg" class="user-image" alt="User Image"/>
                  <span class="hidden-xs">${Session.currentUser}</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- User image -->
                  <li class="user-header">
                    <img src="${static}/images/Avatar2.jpg" class="img-circle" alt="User Image" />
                    <p>您好! 亲爱的${Session.currentNickname!}
                    </p>
                  </li>
                  <!-- Menu Body -->
                  <li class="user-body">
                   <!-- <div class="col-xs-4 text-center">
                      <a href="#">Followers</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Sales</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Friends</a>
                    </div> -->
                  </li>
                  <!-- Menu Footer-->
                  <li class="user-footer">
                    <div class="pull-left">
                      <a id="xxx" class="btn btn-default btn-flat">建议</a>
                    </div>
                    <div class="pull-right">
                      <a href="${base}/signOut" class="btn btn-default btn-flat">登出</a>
                    </div>
                  </li>
                </ul>
              </li>

                <li class="dropdown user user-menu">
                    <a href="#"  >
                        <i class="fa fa-user-circle-o"></i>
                        <span class="hidden-xs">${Session.currentRoleName!}</span>
                    </a>
                </li>
              
              <!-- Control Sidebar Toggle Button 
              <li>
                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
              </li> -->
            </ul>
            
          </div>
        </nav>
      </header>
      
      
      
      <!-- 左侧导航栏  包括了搜索，头像，菜单 -->
      <aside class="main-sidebar">
      
      
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel -->
          <div class="user-panel">
            <div class="pull-left image">
              <img src="${static}/images/Avatar2.jpg" class="img-circle" alt="User Image" />
            </div>
            <div class="pull-left info">
              <p>${Session.currentNickname!}</p>

              <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
            </div>
          </div>
          
          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu">
            <li class="header">主菜单</li>
              <li class="treeview" id="childMenu1" style="display: none" >
                  <a href="#">
                      <i class="fa fa-users" aria-hidden="true"></i>
                      <span>系统管理</span>
                  </a>
              </li>
          </ul>
        </section>
        <!-- /.sidebar -->
      </aside>
 
    <!-- jQuery 2.1.4 -->
  <script src="${static}/js/jquery.min.js"></script>
  <!-- Bootstrap 3.3.2 JS -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
    <script src="//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="${static}/dist/js/app.js" type="text/javascript"></script>
    <!-- SlimScroll 1.3.0 -->
    <script src="//cdn.bootcss.com/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
    <!--  base64 -->
    <script src="${static}/plugins/base64/jquery.base64.min.js"></script>

    <!-- AdminLTE for demo purposes -->
         <script type="text/javascript" src="${static}/dist/js/demo.js" ></script>
         <script type="text/javascript" src="${static}/js/main.js" ></script>
         <script type="text/javascript" src="${static}/build/bsgrid/js/lang/grid.zh-CN.min.js"></script>
         <script type="text/javascript" src="${static}/build/bsgrid/merged/bsgrid.all.min.js"></script>
    
        <!-- bootstrap time picker -->
        <script type="text/javascript" src="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.24/daterangepicker.min.js"></script>
        <script type="text/javascript" src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
        <script type="text/javascript" src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
        <script type="text/javascript" src="//cdn.bootcss.com/Kalendae/0.6.1/kalendae.min.js"></script>

        <!-- DataTables -->
        <script type="text/javascript" src="//cdn.bootcss.com/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="//cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>
        <script type="text/javascript" src="//cdn.bootcss.com/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script>
        <script type="text/javascript" src="//cdn.bootcss.com/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>


  </body>
</html>
<script>
    $(function () {


        $("#clearCache").click(function(){

            $.ajax({
                type:"post",
                url:"${base}/clearCache",
                success:function(result){
                    if(result=="1"){
                        alert("成功清空缓存!");
                    }else{
                        alert("清空缓存失败!");
                    }
                }//end success
            })

        });


        $(".treeview").click(function(){

            setCookie('chooseMenuId', $(this).attr("id"));

        });

        $.getJSON('${base}/permission/getMenu', function (data) {

            $.each(data, function (i, item) {

                var children = item.children;
                var id = item.id;
                $("#childMenu"+id).css("display","block");

                var ulHtml = '<ul class="treeview-menu">';

                $.each(children,function(i,child){

                    var url  = child.url;
                    ulHtml+="<li><a href='${base}"+url+"' ><i class='fa fa-circle-o'></i>"+child.name+"</a></li>";

                });

                ulHtml+='</ul>';
                $("#childMenu"+id).append(ulHtml);

            });

            $(".sidebar-menu .treeview").each(function(i,item){

                    if(!$(item).is(':has(ul)')){

                        $(item).remove();
                    }


            });

            var preChooseMenuId = getCookie('chooseMenuId');
            $("#"+preChooseMenuId).find("ul:eq(0)").css("display","block");

        });//end getJson


        var maxDepth = 2;
        var loadChildren = function(node, level) {
            var hasChildren = node.level < maxDepth;
            for (var i=0; i<8; i++) {
                var id = node.id + (i+1).toString();
                node.children.push({
                    id:id,
                    title:'Node ' + id,
                    has_children:hasChildren,
                    level: node.level + 1,
                    children:[]
                });
                if (hasChildren && level < 2) {
                    loadChildren(node.children[i], (level+1));
                }
            }
            return node;
        };



        $(window).load(function() {
            // Animate loader off screen
            $(".pageLoading").fadeOut(1800);
        });


        function setCookie(name,value){
            var Days = 30;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days*24*60*60*1000);
            document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
        }

        function getCookie(name) {
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }

        function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval=getCookie(name);
            if(cval!=null)
                document.cookie= name + "="+cval+";expires="+exp.toGMTString();
        }


    });

</script>